<template>
  <div class="city-container">
    <van-nav-bar
      class="heard-contatiner"
      title="城市列表"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="zhangwei"></div>
    <div class="main">
      <!-- 当前城市 -->
      <van-index-bar :sticky="false" class="my-van-bar" :index-list="indexList">
        <div class="my-city now-city">
          <van-index-anchor index="#">
            <p class="title" @click="$router.back()">所在城市</p>
          </van-index-anchor>
          <van-cell
            :title="$store.state.city"
            :to="{
              name: 'homeIndex'
            }"
          />
        </div>
        <!-- 当前城市 -->
        <!-- 热门城市 -->
        <!--  -->
        <div class="my-city host-city">
          <van-index-anchor index="热">
            <p class="title" @click="$router.back()">热门城市</p>
          </van-index-anchor>
          <van-cell
            v-for="(item, index) in hostCityList"
            :key="index"
            :title="item.label"
            @click="ToRouteAndSetCity(item)"
          />
        </div>
        <div v-for="item in letters" :key="item" class="my-city every-city">
          <van-index-anchor :index="item">
            <p class="title">
              {{ item }}
            </p>
          </van-index-anchor>
          <van-cell
            v-for="(city, index) in filterCitys(item)"
            :key="index"
            border
            :title="city.label"
            @click="$toast.fail('该城市无房源！')"
          />
          <!-- 热门城市 -->
        </div>
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { getHostCity, getEverCity } from '@/api/area.js'
export default {
  name: 'CityIndex',
  components: {},
  props: {},
  data() {
    return {
      hostCityList: [],
      everyCityList: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      letters: [
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  computed: {
    filterCitys() {
      return (letters) => {
        return this.everyCityList.filter((item) => {
          return item.short.slice(0, 1).toUpperCase() === letters
        })
      }
    }
  },
  watch: {},
  created() {
    this.getHostCity()
    this.getEverCity()
  },
  methods: {
    ...mapActions(['getNewHouseList']),
    async getHostCity() {
      try {
        const { data: res } = await getHostCity()
        this.hostCityList = res.body
      } catch (err) {
        this.$toast.fail('获取城市列表失败！')
      }
    },
    async getEverCity() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await getEverCity({
          level: 1
        })
        const notelist = []
        this.hostCityList.forEach((item) => {
          notelist.push(item.label)
        })
        this.everyCityList = res.body.filter((item) => {
          return !notelist.includes(item.label)
        })
        this.$toast.clear()
      } catch (err) {
        this.$toast('获取所有城市列表失败！')
      }
    },

    // 点击热门城市跳转回页面并且修改数据
    ToRouteAndSetCity(item) {
      // 修改数据
      this.$store.commit('setCity', item.label)
      // 发起异步请求
      this.getNewHouseList()
      // 跳转页面
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.city-container {
  .heard-contatiner {
    z-index: 999;
  }
  .zhangwei {
    height: 92px;
    width: 100%;
  }
  .main {
    width: 100%;
    height: 93vh;
    overflow-y: scroll;
    .my-city {
      .title {
        font-size: 28px;
        padding: 20px 30px;
        color: #999;
      }
    }
    /deep/ .van-index-bar__sidebar {
      position: fixed;
      top: 52%;
      display: flex;
      flex-direction: column;
      right: 10px;
      z-index: 1;
      height: 90%;
      padding: 0;
      text-align: center;
      cursor: pointer;
    }
    /deep/.van-index-bar__index {
      display: inline-block;
      height: 30px !important;
      width: 30px !important;
      padding: 0;
      margin-right: 5px;
      margin-bottom: 30px;
      text-align: center;
      line-height: 55px !important;
      font-size: 28px;
    }
    /deep/.van-index-bar__index--active {
      position: relative;
      top: 15px;
      color: #fff;
      background-color: #21b97a;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
      font-size: 24px;
      margin-bottom: 30px;
      padding: 0px;
      height: 30px !important;
      width: 30px !important;
      line-height: 30px !important;
    }
    /deep/ .van-index-anchor {
      padding: 0;
    }
  }
}
</style>
